<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui">
<h:head>
	<title>Skytech</title>
</h:head>
<h:outputStylesheet library="css" name="ficha.css" />
<h:body>
	<h:form>
		<center>
			<p:tabView id="ficha" orientation="bottom" style="width: 670px;">
				<p:tab title="Dados">
					<p:panelGrid columns="2">
						<h:outputText value="Nome:" />
						<p:inputText required="true" styleClass="component-wide" />

						<h:outputText value="Sexo:" />
						<p:selectOneRadio id="sexo" required="true">
							<f:selectItem itemLabel="Masculino" itemValue="masculino" />
							<f:selectItem itemLabel="Feminino" itemValue="feminino" />
						</p:selectOneRadio>

						<h:panelGroup>
							<h:outputText value="CPF:" />
						</h:panelGroup>
						<h:panelGroup>
							<p:inputMask mask="999.999.999-99" required="true"
								styleClass="component-short" />
							<h:outputText value="RG:" />
							<p:inputText required="true" styleClass="component-short" />
						</h:panelGroup>

						<h:panelGroup>
							<h:outputText value="Org exp:" />
						</h:panelGroup>
						<h:panelGroup>
							<p:inputText required="true" styleClass="component-short" />
							<h:outputText value="Nasc:" />
							<p:inputMask required="true" mask="99/99/9999"
								styleClass="component-short" />
						</h:panelGroup>

						<h:outputText value="Email:" />
						<p:inputText required="true" styleClass="component-wide" />

						<h:panelGroup>
							<h:outputText value="Telefone:" />
						</h:panelGroup>
						<h:panelGroup>
							<p:inputMask required="true" mask="(99) 9999-9999"
								styleClass="component-short" />
							<h:outputText value="Cel:" />
							<p:inputMask required="true" mask="(99) 9999-9999"
								styleClass="component-short" />
						</h:panelGroup>

						<h:outputText value="Estado:" />
						<p:selectOneMenu value="#{pessoaFisicaMB.idEstado}"
							required="true">
							<p:ajax listener="#{pessoaFisicaMB.onCountryChange}"
								update="listaCidade" />
							<f:selectItem itemLabel="ESCOLHA UM ESTADO" itemValue=""
								noSelectionOption="true" />
							<f:selectItems value="#{estadoMB.listaEstado}" var="estado"
								itemLabel="#{estado.nome}" itemValue="#{estado.id}" />
						</p:selectOneMenu>

						<h:outputText value="Cidade:" />
						<p:selectOneMenu id="listaCidade" converter="cidadeConverter"
							value="#{pessoaFisicaMB.PFisica.cidade}" filter="true"
							filterMatchMode="startsWith" required="true">
							<f:selectItem itemLabel="ESCOLHA UMA CIDADE" itemValue=""
								noSelectionOption="true" />
							<f:selectItems value="#{pessoaFisicaMB.listaCidade}" var="cidade"
								itemLabel="#{cidade.nome}" itemValue="#{cidade}" />
						</p:selectOneMenu>

						<h:outputText value="Endereço:" />
						<p:inputText required="true" styleClass="component-wide" />

						<h:panelGroup>
							<h:outputText value="Bairro:" />
						</h:panelGroup>
						<h:panelGroup>
							<p:inputText required="true" styleClass="component-short" />
							<h:outputText value="Cep:" />
							<p:inputMask required="true" mask="99999-999"
								styleClass="component-short" />
						</h:panelGroup>

					</p:panelGrid>
				</p:tab>

				<p:tab title="Confirmar">
					<p:commandButton value="Salvar" update="ficha" />
				</p:tab>
			</p:tabView>
		</center>
	</h:form>
</h:body>
</html>